<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>响应式</title>
  </head>
  <body>
    <div id="root">
      <p>{{num}}</p>
      <button @click="num++">按钮</button>

      <ul>
        <li v-for="(value, key) in person" :key="key">{{key}} - {{value}}</li>
      </ul>
      <button @click="person.age = 18">按钮</button>
      <button @click="person = {name: 'rose', age: 18}">按钮</button>
      <button @click="$set(person, 'age', 18)">按钮</button>

      <ul>
        <li v-for="(person) in persons" :key="person.id">
          {{person.name}} - {{person.age}}
        </li>
      </ul>
      <button @click="persons[0].name = 'rose'">按钮</button>
      <button @click="persons[0].age = 18">按钮</button>
      <button @click="persons[1] = { id: 2, name: 'rose' }">按钮</button>
      <button @click="persons.push({ id: 2, name: 'rose' })">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      /*
        响应式数据：更新数据，它的值会变化，用户界面也会自动更新
        在Vue中什么样的数据时响应式的：
          data
          computed
        有些场景，数据不是响应式：
          1. 给对象添加新属性时，新属性不是响应式
          2. 给数组通过下标添加新数据时，新数据不是响应式
          总结：原有的数据都是响应式的，新添加的不是
            对象：this.$set(响应式对象, 属性名, 属性值) 添加响应式数据
            数组：用数组的方法去操作
              https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95
      */
      new Vue({
        el: "#root",
        data() {
          return {
            num: 0,
            person: {
              name: "jack",
            },
            persons: [{ id: 1, name: "jack" }],
          };
        },
      });
    </script>
  </body>
</html>
